<template>
  <div class="role-process-perm-list">
    <a-row gutter="24">
      <!-- 左侧：角色列表 -->
      <a-col :span="8">
        <div class="panel">
          <div class="panel-header">
            <a-input v-model:value="roleKeyword" placeholder="搜索角色" allow-clear @input="filterRoles" style="margin-bottom: 8px;" />
          </div>
          <a-table
            :columns="roleColumns"
            :dataSource="roleList"
            :pagination="false"
            rowKey="id"
            :row-class-name="row => (row.id === selectedRoleId ? 'selected-row' : '')"
            :customRow="customRoleRow"
            size="small"
            bordered
          />
        </div>
      </a-col>
      <!-- 右侧：流程列表 -->
      <a-col :span="16">
        <div class="panel">
          <div class="panel-header" style="display: flex; justify-content: space-between; align-items: center;">
            <a-input v-model:value="processKeyword" placeholder="搜索流程" allow-clear @input="filterProcesses" style="width: 200px;" />
            <a-button type="primary" :disabled="!selectedRoleId" @click="handleSubmit">提交</a-button>
          </div>
          <a-table
            :columns="processColumns"
            :dataSource="processList"
            :pagination="false"
            rowKey="processKey"
            :row-selection="processRowSelection"
            size="small"
            bordered
          />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { listRoleApi } from '@/api/system/authority/role.api';
import { getProcessList } from '@/api/workflow/process.api';
import { getRoleProcessPermList, batchAssignRoleProcessPerm } from '@/api/workflow/roleProcessPerm.api';
import { message } from 'ant-design-vue';
import { ElMessage } from 'element-plus'
import Icon from '@/components/Icon/Icon.vue'

// 引入统一的夜间模式样式
import '@/components/Workflow/styles/dark-theme.css'

// 角色相关
const allRoleList = ref([]); // 原始数据
const roleList = ref([]);    // 筛选后
const roleKeyword = ref('');
const selectedRoleId = ref();

const roleColumns = [
  { title: '角色名称', dataIndex: 'name', key: 'name' },
  { title: '角色编码', dataIndex: 'code', key: 'code' },
];

function fetchRoles() {
  listRoleApi().then(res => {
    allRoleList.value = res?.items || res?.rows || [];
    filterRoles();
  });
}
function filterRoles() {
  const kw = roleKeyword.value.trim();
  if (!kw) {
    roleList.value = allRoleList.value;
  } else {
    roleList.value = allRoleList.value.filter(r => r.name.includes(kw) || r.code?.includes(kw));
  }
}
function onRoleRowClick(record) {
  selectedRoleId.value = record.id;
  fetchRoleProcessPerms();
}

function customRoleRow(record) {
  return {
    onClick: () => {
      selectedRoleId.value = record.id;
      fetchRoleProcessPerms();
    }
  };
}

// 流程相关
const allProcessList = ref([]);
const processList = ref([]);
const processKeyword = ref('');
const selectedProcessKeys = ref([]);

const processColumns = [
  { title: '流程名称', dataIndex: 'name', key: 'name' },
  { title: '流程Key', dataIndex: 'processKey', key: 'processKey' },
  { title: '状态', dataIndex: 'status', key: 'status' },
];

function fetchProcesses() {
  getProcessList().then(res => {
    allProcessList.value = (res?.data?.items || res?.items || res?.rows || []).map(p => ({ ...p, key: p.processKey }));
    filterProcesses();
  });
}
function filterProcesses() {
  const kw = processKeyword.value.trim();
  if (!kw) {
    processList.value = allProcessList.value;
  } else {
    processList.value = allProcessList.value.filter(p => p.name.includes(kw) || p.processKey?.includes(kw));
  }
}

// 获取角色已绑定流程
function fetchRoleProcessPerms() {
  if (!selectedRoleId.value) return;
  getRoleProcessPermList({ roleId: selectedRoleId.value }).then(res => {
    // 取出已绑定的流程Key
    const keys = (res?.items || res?.rows || []).map(item => item.processKey);
    selectedProcessKeys.value = keys;
  });
}

// 流程多选配置
const processRowSelection = reactive({
  type: 'checkbox',
  selectedRowKeys: selectedProcessKeys,
  onChange: (selectedRowKeys) => {
    selectedProcessKeys.value = selectedRowKeys;
  },
});

// 提交绑定
function handleSubmit() {
  if (!selectedRoleId.value) {
    message.warning('请先选择角色');
    return;
  }
  batchAssignRoleProcessPerm({ roleId: selectedRoleId.value, processKeys: selectedProcessKeys.value }).then(() => {
    message.success('绑定成功');
    fetchRoleProcessPerms();
  });
}

onMounted(() => {
  fetchRoles();
  fetchProcesses();
});
</script>

<style scoped>
.role-process-perm-list {
  padding: 24px;
}
.panel {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  min-height: 400px;
  box-shadow: 0 2px 8px #f0f1f2;
}
.selected-row {
  background: #e6f7ff !important;
}
.panel-header {
  margin-bottom: 12px;
}
</style> 